<div class="page page-typography">

    <ol class="breadcrumb breadcrumb-small">
        <li>UI Elements</li>
        <li class="active"><a href="#ui/typography">Typography</a>
        </li>
    </ol>

    <div class="page-wrap">
        <!-- Row 1 -->
        <div class="row">
            <!-- Headers -->
            <div class="col-lg-12">
                <div class="panel panel-lined mb30">
                    <div class="panel-heading"><i>Headers</i>
                    </div>
                    <div class="panel-body">
                        <h1>h1. Bootstrap Heading <small>secondary text</small></h1>
                        <br/>
                        <h2>h2. Bootstrap Heading <small>secondary text</small></h2>
                        <br/>
                        <h3>h3. Bootstrap Heading <small>secondary text</small></h3>
                        <br/>
                        <h4>h4. Bootstrap Heading <small>secondary text</small></h4>
                        <br/>
                        <h5>h5. Bootstrap Heading <small>secondary text</small></h5>
                        <br/>
                        <h6>h6. Bootstrap Heading <small>secondary text</small></h6>

                    </div>
                </div>
            </div>
            <!-- #end headers -->
        </div>
        <!-- #end row 1 -->

        <!-- Row 2 -->
        <div class="row">
            <div class="col-lg-6">
                <!-- Body copy -->
                <div class="panel panel-lined mb30">
                    <div class="panel-heading"><i>Body Copy</i>
                    </div>
                    <div class="panel-body">
                        <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
                        <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.</p>
                        <br>
                        <p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
                    </div>
                </div>
                <!-- #end body-copy -->

                <!-- Inline Text Elements -->
                <div class="panel panel-lined mb30">
                    <div class="panel-heading"><i>Inline Text Elements</i>
                    </div>
                    <div class="panel-body">
                        <p>You can use the mark tag to
                            <mark>highlight</mark> text.</p>
                        <p><del>This line of text is meant to be treated as deleted text.</del>
                        </p>
                        <p><s>This line of text is meant to be treated as no longer accurate.</s>
                        </p>
                        <p><ins>This line of text is meant to be treated as an addition to the document.</ins>
                        </p>
                        <p><u>This line of text will render as underlined</u>
                        </p>
                        <p><small>This line of text is meant to be treated as fine print.</small>
                        </p>
                        <p>The following snippet of text is <strong>rendered as bold text.</strong>
                        </p>
                        <p>The following snippet of text is <em>rendered as italicized text</em>
                        </p>
                    </div>
                </div>
                <!-- #end Inline text elements -->

                <!-- Alignment Classes -->
                <div class="panel panel-lined mb30">
                    <div class="panel-heading"><i>Type Classes</i>
                    </div>
                    <div class="panel-body">
                        <p class="text-left">Left aligned text.</p>
                        <p class="text-center">Center aligned text.</p>
                        <p class="text-right">Right aligned text.</p>
                        <p class="text-justify">Justified text.</p>
                        <p class="text-nowrap">No wrap text.</p>
                        <p class="text-lowercase">Lowercased text.</p>
                        <p class="text-uppercase">Uppercased text.</p>
                        <p class="text-capitalize">Capitalized text.</p>
                    </div>
                </div>
                <!-- #end alignment classes -->

                <!-- Codes -->
                <div class="panel panel-lined mb30">
                    <div class="panel-heading"><i>Codes</i>
                    </div>
                    <div class="panel-body">
                        <p>For example, <code>&lt;section&gt;</code> should be wrapped as inline.</p>
                        <p>Keyboards: <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
                        </p>
                    </div>
                </div>
                <!-- #end codes -->
            </div>
            <!-- #end col -->

            <div class="col-lg-6">
                <!-- Addresses -->
                <div class="panel panel-lined mb30">
                    <div class="panel-heading"><i>Addresses</i>
                    </div>
                    <div class="panel-body">
                        <address>
							<strong>Twitter, Inc.</strong><br>
							795 Folsom Ave, Suite 600<br>
							San Francisco, CA 94107<br>
							<abbr title="Phone">P:</abbr> (123) 456-7890
						</address>

                        <address>
							<strong>Full Name</strong><br>
							<a href="mailto:#">first.last@example.com</a>
						</address>
                    </div>
                </div>
                <!-- #end addresses -->

                <!-- Blockquote -->
                <div class="panel panel-lined mb30">
                    <div class="panel-heading"><i>Blockquotes</i>
                    </div>
                    <div class="panel-body">
                        <blockquote>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                        </blockquote>
                        <blockquote>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                            <footer>Someone famous in <cite title="Source Title">Source Title</cite>
                            </footer>
                        </blockquote>
                        <blockquote class="blockquote-reverse">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                            <footer>Someone famous in <cite title="Source Title">Source Title</cite>
                            </footer>
                        </blockquote>
                    </div>
                </div>
                <!-- #end blockquote -->

                <!-- Lists -->
                <div class="panel panel-lined mb30">
                    <div class="panel-heading"><i>Lists</i>
                    </div>
                    <div class="panel-body">
                        <ul>
                            <li>Lorem ipsum dolor sit amet</li>
                            <li>Consectetur adipiscing elit</li>
                            <li>Integer molestie lorem at massa</li>
                            <li>Facilisis in pretium nisl aliquet</li>
                            <li>Nulla volutpat aliquam velit
                                <ul>
                                    <li>Item One</li>
                                    <li>Item Two</li>
                                    <li>Item Three</li>
                                </ul>
                            </li>
                            <li>Faucibus porta lacus fringilla vel</li>
                            <li>Aenean sit amet erat nunc</li>
                        </ul>
                        <hr/>
                        <ol>
                            <li>Lorem ipsum dolor sit amet</li>
                            <li>Consectetur adipiscing elit</li>
                            <li>Integer molestie lorem at massa</li>
                            <li>Facilisis in pretium nisl aliquet</li>
                            <li>Nulla volutpat aliquam velit</li>
                            <li>Faucibus porta lacus fringilla vel</li>
                            <li>Aenean sit amet erat nunc</li>
                        </ol>
                    </div>
                </div>
                <!-- #end Lists -->

            </div>
            <!-- #end col -->
        </div>
        <!-- #end row 2 -->
    </div>
</div>